<template>
	<div class="mainPage">
		<!-- <div class="content-header">
			<div>{{ ServerInfo.IP }}</div>
			<router-link style="font-size:16px" :to="{ name: 'NodeUsability' }">关闭</router-link>
		</div> -->
		<el-row :gutter="20" style="margin: 0px auto;margin-top: 10px;">
			<el-col :md="24">
				<div style="width: 100%;display: flex;flex-direction: row;background-color: white;justify-content: space-between;">
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
						<el-menu-item index="1">系统信息</el-menu-item>
						<el-menu-item index="2">硬件信息</el-menu-item>
						<el-menu-item index="3">端口图解</el-menu-item>
						<el-menu-item index="4">配置信息</el-menu-item>
					</el-menu>
					<div style="font-size: 24px;display: flex;flex-direction: row;align-items: center;width:auto;margin-right: 20px;">
						IP:{{chooseIP}}
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="content-main" v-if="chooseID == 1">
			<el-row :gutter="20">
				<el-col :span="12">
					<div class="firstBox">
						<div class="systemMesTitle">
							<div style="border-left: solid 2px skyblue;">
								<span style="margin-left: 10px;">系统信息</span>
							</div>
						</div>
						<div class="systemBox">
							<div class="systemCon">
								<div class="titleName">主机名:</div>
								<div class="titleCon">{{ this.tableData[0].HOSTNAME }}</div>
							</div>
							<div class="systemCon">
								<div class="titleName">平台:</div>
								<div style="overflow: scroll;margin:5px 5px 5px 15px;">{{ this.tableData[0].RELEASE }}
								</div>
							</div>
							<div class="systemCon">
								<div class="titleName">物理内存:</div>
								<div class="titleCon">{{ this.tableData[0].MEMORY_GB }}</div>
							</div>
							<div class="systemCon">
								<div class="titleName">运行时间:</div>
								<div style="margin:15px;font-weight: bold;overflow: auto;">
									{{ this.tableData[0].SYSUPTIME }}
								</div>
							</div>
							<div class="systemCon" style="border: none;">
								<div class="titleName">下一跳IP:</div>
								<div
									style="font-size: 14px;margin:15px 15px 15px 5px;overflow-wrap: break-word;overflow: auto;">
									{{ this.tableData[0].NEXTIP }}

								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="firstBox">
						<div class="systemMesTitle">
							<div style="border-left: solid 2px skyblue;width: 100%;">
								<div
									style="display: flex;flex-direction: row;justify-content: space-between;width: 95%;margin: 0 auto;">
									<span>时钟</span>
									<i class="el-icon-refresh" title="刷新" style="margin-left: 10px;cursor: pointer;"
										@click="peizhi()"></i>
								</div>
							</div>
						</div>
						<div class="timeBox" v-loading="loading">
							<div v-for="(item,index) in xunjianData.clock">
								{{item}}
							</div>

						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="firstBox">
						<div class="systemMesTitle">
							<div style="border-left: solid 2px skyblue;width: 100%;">
								<div
									style="display: flex;flex-direction: row;justify-content: space-between;width: 95%;margin: 0 auto;">
									<span>风扇</span>
									<i class="el-icon-refresh" title="刷新" style="margin-left: 10px;cursor: pointer;"
										@click="peizhi()"></i>
								</div>
							</div>
						</div>
						<div class="timeBox" v-loading="loading">
							<div v-for="(item,index) in xunjianData.fan">
								{{item}}
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin-top: 20px;">
				<el-col :span="18">
					<vCpuAndIoLoad />
				</el-col>
				<el-col :span="6">
					<div class="powerBox">
						<div class="systemMesTitle">
							<div style="border-left: solid 2px skyblue;width: 100%;">
								<div
									style="display: flex;flex-direction: row;justify-content: space-between;width: 95%;margin: 0 auto;">
									<span>电源</span>
									<i class="el-icon-refresh" title="刷新" style="margin-left: 10px;cursor: pointer;"
										@click="peizhi()"></i>
								</div>
							</div>
						</div>
						<div class="powerConBox" v-loading="loading">
							<div v-for="(item,index) in xunjianData.power">
								<div v-html="item"></div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin-top: 20px;">
				<el-col :span="9">
					<div style="height: 300px;">
						<div class="environmentBox">
							<div class="systemMesTitle">
								<div style="border-left: solid 2px skyblue;width: 100%;">
									<div class="logTitle">
										<span>日志</span>
										<div class="levelBox">
											<span style="font-size: 16px;font-weight: normal;">等级:</span>
											<template>
												<el-select v-model="chooseLevel" placeholder="请选择" @change="logData()"
													style="width: 100px;margin-left: 10px;">
													<el-option v-for="item in options" :key="item.id" :label="item.name"
														:value="item.id">
													</el-option>
												</el-select>
											</template>
											<i class="el-icon-refresh" title="刷新"
												style="margin-left: 10px;cursor: pointer;" @click="logData()"></i>
										</div>
									</div>
								</div>
							</div>
							<div class="logConBox" v-loading="loading3">
								<div class="logContect" v-if="chooseLevel != ''">
									<div v-for="item in logList" style="display: flex;flex-direction: row;">
										{{item}}
									</div>
								</div>
								<div class="logContect1" v-if="chooseLevel == ''">
									<template>
										<el-table :data="logTable" height="250" border
											style="width: 100%;font-size: 14px;">
											<el-table-column prop="NOTIF" label="NOTIF">
											</el-table-column>
											<el-table-column prop="EMERG" label="EMERG">
											</el-table-column>
											<el-table-column prop="CRIT" label="CRIT">
											</el-table-column>
											<el-table-column prop="ERROR" label="ERROR">
											</el-table-column>
											<el-table-column prop="ALERT" label="ALERT">
											</el-table-column>
											<el-table-column prop="INFO" label="INFO">
											</el-table-column>
											<el-table-column prop="DEBUG" label="DEBUG">
											</el-table-column>
											<el-table-column prop="WARN" label="WARN">
											</el-table-column>
										</el-table>
									</template>
									<!-- <div v-for="(item,index) in logTable" style="height: 80px;'">
										<div class="logWord">{{index}}</div>
										<div class="logWord">{{item}}</div>
									</div> -->
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="9">
					<div style="background-color: yellowgreen;height: 300px;">
						<div class="environmentBox">
							<div class="systemMesTitle">
								<div style="border-left: solid 2px skyblue;width:100%;">
									<div class="logTitle">
										<span>路由状况检查</span>
										<i class="el-icon-refresh" title="刷新" style="margin-left: 10px;cursor: pointer;"
											@click="getLuyou()"></i>
									</div>
								</div>
							</div>
							<div class="shebeiBox" v-loading="luyouLoading">
								<template>
									<el-table :data="routingtableList" height="250" border
										style="width: 100%;font-size: 14px;">
										<el-table-column prop="cost" label="cost">
										</el-table-column>
										<el-table-column prop="destination_Mask" label="destination_Mask">
										</el-table-column>
										<el-table-column prop="flags" label="flags">
										</el-table-column>
										<el-table-column prop="interface" label="interface">
										</el-table-column>
										<el-table-column prop="nextHop" label="nextHop">
										</el-table-column>
										<el-table-column prop="pre" label="pre">
										</el-table-column>
										<el-table-column prop="proto" label="proto">
										</el-table-column>
									</el-table>
								</template>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div style="background-color: salmon;height: 300px;">
						<div class="environmentBox">
							<div class="systemMesTitle">
								<div style="border-left: solid 2px skyblue;width: 100%;">
									<div
										style="display: flex;flex-direction: row;justify-content: space-between;width: 95%;margin: 0 auto;">
										<span>环境</span>
										<i class="el-icon-refresh" title="刷新" style="margin-left: 10px;cursor: pointer;"
											@click="peizhi()"></i>
									</div>
								</div>
							</div>
							<div class="enviromentConBox" v-loading="loading">
								<div v-for="(item,index) in xunjianData.enviroment">
									<div v-html="item"></div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="containBox" v-if="chooseID == 3">
			<div class="portLeftBox">
				<div
					style="width: 100%;height: 50%;display: flex;flex-direction: column;justify-content: space-around;align-items: center;">
					<div style="font-size: 28px;">{{ ServerInfo.IP }}</div>
					<img src="../../../../assets/img/port.png" alt="" style="width:300px;height:300px;">
				</div>
				<div class="echartsBox" ref="myEcharts"></div>
			</div>
			<div style="width: 70%;height: 300px;text-align: center;line-height: 300px;" v-show="portList.length == 0">
				暂无数据
			</div>
			<div :class="[divHeight == true?'portRightBox':'notPortRightBox']" v-loading="portLoading"
				v-show="portList.length != 0">
				<div style="width: 100%;font-weight: bold;font-size: 20px;margin-left:20px;margin-top: 20px;">端口图解:
				</div>
				<div class="portBox" v-for="item in portList">
					<div v-if="item.phy == 'up' || item.phy == 'UP'">
						<img src="../../../../assets/img/port_up.png" alt="UP" style="width: 80px;height: 80px;"
							title="UP">
					</div>
					<div v-if="item.phy == 'down' || item.phy == 'DOWN'">
						<img src="../../../../assets/img/port_down.png" alt="DOWN" style="width: 80px;height: 80px;"
							title="DOWN">
					</div>
					<div class="portName" :title="item.ifname">
						{{item.ifname}}
					</div>
				</div>
			</div>
		</div>
		<div class="containBox3" v-if="chooseID == 2">
			<el-row :gutter="20">
				<el-col :span="18">
					<div style="height: 400px;display: flex;flex-direction: column;justify-content: space-between;">
						<div>
							<!-- <el-col :span="8">
								<div class="secondBox">
									<div class="systemMesTitle">
										<div style="border-left: solid 2px skyblue;width:100%;">
											<div class="logTitle">
												<span>EtherChannel检查</span>
												<i class="el-icon-refresh" title="刷新"
													style="margin-left: 10px;cursor: pointer;" @click="getEC()"></i>
											</div>
										</div>
									</div>
									<div class="MconBox" v-loading="EtherChannelLoading">
										<div v-for="(item,index) in EtherChannelList">
											{{item}}
										</div>
									</div>
								</div>
							</el-col> -->
							<!-- <el-col :span="8">
								<div class="secondBox">
									<div class="systemMesTitle">
										<div style="border-left: solid 2px skyblue;width:100%;">
											<div class="logTitle">
												<span>设备冗余协议检查</span>
												<i class="el-icon-refresh" title="刷新"
													style="margin-left: 10px;cursor: pointer;" @click="getYvkang()"></i>
											</div>
										</div>
									</div>
									<div class="MconBox" v-loading="yvkangLoading">
										<div v-for="(item,index) in standbyList">
											{{item}}
										</div>
									</div>
								</div>
							</el-col> -->
							<!-- <el-col :span="8">
								<div class="secondBox">
									<div class="systemMesTitle">
										<div style="border-left: solid 2px skyblue;width:100%;">
											<div class="logTitle">
												<span>CDP、NTP协议、其他维护信息</span>
												<i class="el-icon-refresh" title="刷新"
													style="margin-left: 10px;cursor: pointer;" @click="getCDP()"></i>
											</div>
										</div>
									</div>
									<div class="MconBox" v-loading="cdpLoading">
										<div v-for="(item,index) in cdpList">
											{{item}}
										</div>
									</div>
								</div>
							</el-col> -->
						</div>
						<div>
							<el-col :span="24">
								<div class="shebeiCon">
									<div class="systemMesTitle">
										<div style="border-left: solid 2px skyblue;width:100%;">
											<div class="logTitle1">
												<span>设备模块运行状况检查</span>
												<i class="el-icon-refresh" title="刷新"
													style="margin-left: 10px;cursor: pointer;"
													@click="shebeiData()"></i>
											</div>
										</div>
									</div>
									<div class="shebeiConBox" v-loading="loading2">
										<div style="display: flex;flex-direction: row;">
											<div v-for="item in equipmentList[0]" class="shebeiInfo" :title="item">
												{{item}}
											</div>
										</div>
										<div style="display: flex;flex-direction: row;">
											<div v-for="item in equipmentList[1]" class="shebeiInfo" :title="item">
												{{item}}
											</div>
										</div>
									</div>
								</div>
							</el-col>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="STPBox">
						<div class="systemMesTitle">
							<div style="border-left: solid 2px skyblue;width:100%;">
								<div class="logTitle">
									<span>生成STP树检查</span>
									<i class="el-icon-refresh" title="刷新" style="margin-left: 10px;cursor: pointer;"
										@click="getSTP()"></i>
								</div>
							</div>
						</div>
						<div class="stpTreeBox" v-loading="stpLoading">
							<div v-for="(item,index) in stpList">
								{{item}}
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin-top: 20px;">
				<el-col :span="18">
					<el-col :span="24">
						<div class="VLANBox">
							<div class="systemMesTitle">
								<div style="border-left: solid 2px skyblue;width:100%;">
									<div class="logTitle1">
										<span>VLAN状态检查</span>
										<i class="el-icon-refresh" title="刷新" style="margin-left: 10px;cursor: pointer;"
											@click="hardwareInfo()"></i>
									</div>
								</div>
							</div>
							<div class="vlanConBox" v-loading="VLANLoading">
								<div v-for="(item,index) in vlanList">
									{{item}}
								</div>
							</div>
						</div>
					</el-col>
				</el-col>
				<el-col :span="6">
					<div class="portConBox">
						<div class="systemMesTitle">
							<div style="border-left: solid 2px skyblue;width:100%;">
								<div class="logTitle">
									<span>接口状态检查</span>
									<i class="el-icon-refresh" title="刷新" style="margin-left: 10px;cursor: pointer;"
										@click="getPort()"></i>
								</div>
							</div>
						</div>
						<div class="portWord" v-loading="portMesLoading">
							<div v-for="(item,index) in portMesList">
								{{item}}
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="containBox4" v-show="chooseID == 4">
			<el-col :md="24">
				<div class="systemMesTitle">
					<div style="border-left: solid 2px skyblue;width:100%;">
						<div class="logTitle1">
							<span>配置信息</span>
							<el-button style="float: right; padding: 3px 0" type="text" @click="check">校验配置是否一致
							</el-button>
						</div>
					</div>
				</div>
				<div style="height:800px;width: 100%;">
					<v-config-info ref="config"></v-config-info>
				</div>
			</el-col>
		</div>
	</div>
</template>

<script>
	import {
		getJavaServerData
	} from '@/api/index.js';
	import vCpuAndIoLoad from "./component/CpuAndIoLoad.vue";
	import vConfigInfo from "./ConfigInfo.vue";
	// import vBasic from "./basic.vue";
	// import vPortFlux from "./component/PortFlux.vue";
	// import vPortFluxForSSH from "./component/PortFluxForSSH.vue";
	import {
		GetItem
	} from "@/utils/dataStore";
	import {
		fetchData
	} from "@/api/index.js";
	import {
		getData
	} from "@/api/index.js";
	import {
		Log
	} from '@icon-park/vue';
	import bus from "common/bus.js";
	export default {
		components: {
			vCpuAndIoLoad,
			vConfigInfo,
			// vBasic,
			// vPortFlux,
			// vPortFluxForSSH,
		},

		created() {
			GetItem(sessionStorage.getItem("PushId")).then((_) => {
				this.ServerInfo = _[0].articleAddress;
				this.selectedMonID = _[0].articleAddress;
				// this.getPortInfo()
				this.getTableData();
				this.isSSH = _[0].articleAddress.connType === "ssh";
			});
		},
		mounted() {


		},
		data() {
			return {
				ServerInfo: "",
				activeIndex: '1',
				square: false,
				square2: false,
				square3: false,
				square4: false,
				square5: false,
				square6: false,
				loading: false,
				loading2: false,
				loading3: false,
				yvkangLoading: false,
				portLoading: false,
				EtherChannelLoading: false,
				luyouLoading: false,
				VLANLoading: false,
				stpLoading: false,
				portMesLoading: false,
				cdpLoading: false,
				vlanList: [],
				isDiv: false,
				isDiv2: false,
				isDiv3: false,
				isDiv4: false,
				isDiv5: false,
				isDiv6: false,
				standbyList: [],
				routingtableList: [],
				logList: [],
				equipmentList: [],
				EtherChannelList: [],
				chooseLevel: '',
				level: '',
				chooseID: 1,
				divHeight: true,
				options: [{
						name: 'Alert(一级)',
						id: 1
					},
					{
						id: 2,
						name: 'Critical(二级)'
					},
					{
						id: 3,
						name: 'Errors(三级)'
					},
					{
						id: '',
						name: '日志概述'
					}
				],
				stpList: [],
				chooseIP:'',
				cdpList: [],
				upNum:0,
				downNum:0,
				logTable: [],
				logInfo: '',
				portList: [],
				portMesList: [],
				xunjianData: [],
				postData: {
					opera: "ospanlinfo",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {
						monid: "",
					},
				},
				postSearchData: {
					opera: "hostconnect",
					curPage: 1,
					pageSize: 2000,
					sort: {
						sortColumn: "monid",
						sortOrders: "asc",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				selectedMonID: "",
				tableData: [{
					HOSTNAME: "",
					RELEASE: "",
					MEMORY_GB: "",
					SYSUPTIME: "",
					NEXTIP: "",
				}, ],
				isSSH: "",
				isSearch: true,
				arr: []
			};
		},
		methods: {
			getTableData() {
				fetchData({
						postSearchData: JSON.stringify(this.postSearchData),
					})
					.then((_) => _.data)
					.then((resultData) => {
						this.postData.filters.monid = resultData.filter(
								(_) => _.IP == this.selectedMonID.IP
							)[0] ?
							resultData.filter((_) => _.IP == this.selectedMonID.IP)[0].MONID :
							"";

						if (!this.postData.filters.monid) {} else {
							fetchData({
								postData: JSON.stringify(this.postData)
							}).then(
								(res) => {
									console.log(889,res)
									this.tableData = res.data;
									this.chooseIP = res.data[0].IP
									this.getLuyou()
									this.logData()
									this.peizhi()
								}
							);
						}
					});

			},
			// getInfo() {

			// 	getJavaServerData("/Sp/networkconfiguration", {
			// 			hid: this.selectedMonID.MONID,
			// 		})
			// 		.then((_) => {
			// 			console.log("配置",_)


			// 		})
			// 		.finally((_) => {

			// 		});
			// },
			//硬件配置管理
			async hardwareInfo() {
				this.vlanList = []
				this.VLANLoading = true
				//vlan
				let res = await getData('/Sp/networkvlan', {
					hid: this.selectedMonID.MONID
				})
				if (res) {
					this.vlanList = res
					this.VLANLoading = false
				}

				//设备冗余协议检查
				let res3 = await getData('/Sp/networkstandby', {
					hid: this.selectedMonID.MONID
				})
				if (res3) {
					this.standbyList = res3
					this.yvkangLoading = false
				}


			},

			async getYvkang() {
				this.standbyList = []
				this.yvkangLoading = true
				//设备冗余协议检查
				let res3 = await getData('/Sp/networkstandby', {
					hid: this.selectedMonID.MONID
				})
				if (res3) {
					this.standbyList = res3
					this.yvkangLoading = false
				}
			},
			async getEC() {
				this.EtherChannelList = []
				this.EtherChannelLoading = true
				//EtherChannelList检查
				let res = await getData('/Sp/networkEtherChannel', {
					hid: this.selectedMonID.MONID
				})
				if (res) {
					this.EtherChannelList = res
					this.EtherChannelLoading = false
					console.log("Eee", this.EtherChannelList)
				}
			},
			async getLuyou() {
				this.luyouLoading = true
				this.routingtableList = []
				//路由状况检查
				let res = await getData('/Sp/networkroutingtable', {
					hid: this.selectedMonID.MONID
				})
				if (res) {
					console.log("路由", res)
					this.routingtableList = res
					this.luyouLoading = false
				}
			},
			drawChart() {
				this.myChart = this.$echarts.init(this.$refs.myEcharts);
				let option = {
					title: {
						text: '端口UP/DOWN占比',
						// subtext: 'Fake Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} {b} : {c} ({d}%)"
					},

					legend: {
						orient: 'horizontal',
						bottom: '5%'
					},
					series: [{
						name: '端口数',
						type: 'pie',
						radius: ['60%', '35%'],
						data: [{
							value: this.upNum,
							name: 'UP',
						}, {
							value: this.downNum,
							name: 'DOWN'
						}],
						itemStyle: {
							normal: {
								color: function(colors) {
									let colorList = [
										'#38b641',
										'#d11d07'
									];
									return colorList[colors.dataIndex];
								}
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option);
			},
			handleSelect(index) {
				this.chooseID = index
				if (this.portList.length != 0) {
					console.log(this.portList)
					console.log(this.$refs.myEcharts)
					this.myChart.dispose();
				}
				if (this.chooseID == 3) {
					this.getPortInfo()

				} else if (this.chooseID == 2) {
					this.getEC()
					this.getLuyou()
					this.getYvkang()
					this.getCDP()
					this.shebeiData()
					this.getSTP()
					this.hardwareInfo()
					this.getPort()
				} else if (this.chooseID == 4) {

				} else if (this.chooseID == 1) {


				}
			},
			async peizhi() {
				this.xunjianData = []
				this.loading = true
				let res = await getData('/Sp/networkbaseinfo', {
					hid: this.selectedMonID.MONID
				})
				if (res) {
					console.log(3232, res)
					this.xunjianData = res
					this.loading = false

				}
			},
			async shebeiData() {
				this.equipmentList = []
				this.loading2 = true
				let res = await getData('/Sp/networkdevice', {
					hid: this.postData.filters.monid
				})
				if (res) {
					this.equipmentList = res
					this.loading2 = false
					console.log("设备模块运行状况检查", res)
				}
			},

			async logData() {
				this.logTable = []
				this.logList = []
				this.loading3 = true
				let res = await getData('/Sp/networklog', {
					hid: this.postData.filters.monid,
					level: this.chooseLevel
				})
				if (res) {

					// this.logTable = res.log
					this.logTable.push(res.log)
					this.logList = res.log
					this.loading3 = false
					this.isSearch = true

				}
			},
			async getPort() {
				this.portMesList = []
				this.portMesLoading = true
				//接口状态检查
				let res2 = await getData('/Sp/networkinterface', {
					hid: this.postData.filters.monid
				})
				if (res2) {
					console.log("zz", res2)
					this.portMesList = res2
					this.portMesLoading = false
					this.isSearch = true
				}

			},
			async getSTP() {

				this.stpList = []
				this.stpLoading = true
				//生成树STP检查
				let res = await getData('/Sp/networkSTP', {
					hid: this.postData.filters.monid
				})
				if (res) {
					this.stpList = res
					this.stpLoading = false
					this.isSearch = true
				}
			},
			async getCDP() {

				this.cdpList = []
				this.cdpLoading = true
				console.log(this.cdpLoading)
				//CDP、NTP协议、其他维护信息
				let res3 = await getData('/Sp/networkcdpnei', {
					hid: this.postData.filters.monid
				})
				if (res3) {
					console.log('cdp', res3)
					this.cdpList = res3
					this.cdpLoading = false
					this.isSearch = true
				}
			},
			getPortInfo() {
				this.portLoading = true
				getJavaServerData('/Sp/networkportinfo', {
					hid: this.postData.filters.monid
				}).then((res) => {
					console.log('端口图', res)
					this.portLoading = false
					if (res.length == 0) {
						this.portList = [];
						
					} else {
						this.portList = res;
						for(let i = 0;i<res.length;i++){
							console.log(res[i].phy)
							if(res[i].phy == 'up'){
								this.upNum = this.upNum+1
							}else{
								this.downNum = this.downNum+1
							}
						}
						if (this.portList.length > 40) {
							this.divHeight = false
						}
						console.log(this.divHeight)
						this.drawChart()
					}
				});
			},
			check() {
				this.$refs.config.verification();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.logBox {
		width: 100%;
		height: 38%;
		background-color: white;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		overflow: hidden;
	}

	.configuration {
		width: 49%;
		height: 100%;
		background-color: yellow;
	}

	.cell {
		font-size: 14px !important;
		color: black !important;
	}

	.shebeiConBox {
		width: 100%;
		// height: 140px;
		height: 400px;
		overflow: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.stpTreeBox {
		width: 100%;
		height: 360px;
		overflow: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 18px;
	}

	.portWord {
		width: 95%;
		margin: 0 auto;
		height: 380px;
		overflow: auto;
	}

	.vlanConBox {
		width: 100%;
		height: 385px;
		overflow: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 20px;
	}

	.MconBox {
		width: 100%;
		height: 160px;
		overflow: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.STPBox {
		height: 400px;
		background-color: white;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
	}

	.powerBox {
		background-color: white;
		height: 345px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
	}

	.shebeiCon {
		background-color: white;
		height: 400px;
		// height: 180px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
	}

	.luyouStyle {
		width: 90px;
		height: 40px;
		border: solid 1px black;
	}

	.environmentBox {
		background-color: white;
		height: 300px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
	}

	.shebeiBox {
		width: 100%;
		height: 250px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.logConBox {
		width: 100%;
		height: 250px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: auto;
	}


	.enviromentConBox {
		width: 100%;
		height: 260px;
		white-space: pre;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: auto;
	}

	.powerConBox {
		width: 100%;
		height: 305px;
		white-space: pre;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		overflow: auto;
	}

	.timeBox div {
		text-align: center;
	}

	.timeBox {
		width: 100%;
		height: 110px;
		margin: 0 auto;
		font-size: 18px;
		overflow: auto;
	}

	.titleCon {
		font-size: 22px;
		font-weight: bold;
		margin: 15px;
		overflow-wrap: break-word;
		overflow: auto;
	}

	.titleName {
		width: 100%;
		height: 22px;
		font-size: 16px;
		font-weight: bold;
		margin-left: 15px;
		margin-top: 10px;
	}

	.systemBox {
		width: 100%;
		height: 110px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

	}

	.shebeiInfo {
		width: 100px;
		padding: 10px 0px;
		border: solid 1px black;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.secondBox {
		background-color: white;
		height: 200px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
	}

	.firstBox {
		background-color: white;
		height: 150px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
	}

	.systemCon {
		width: 20%;
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border-right: solid 1px #EBEEF5;
	}

	.systemMesTitle {
		width: 100%;
		height: 40px;
		font-size: 18px;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		border-bottom: solid 1px #EBEEF5;
		box-sizing: border-box;
	}

	.logBoxsquare {
		width: 100%;
		height: 38%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.changeSquare {
		width: 300px;
		height: 300px;
		border-radius: 20px;
		background-color: #ee6666;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.changeSquare2 {
		width: 300px;
		height: 300px;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		background-color: mediumpurple;
	}

	//禁用样式
	.stop {
		cursor: not-allowed !important;
	}

	.changeSquare3 {
		width: 300px;
		height: 300px;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		background-color: #91cc75;
		border: none;
	}

	.changeSquare5 {
		width: 300px;
		height: 300px;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		background-color: #fac858;
		border: none;
	}

	.changeSquare6 {
		width: 300px;
		height: 300px;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		background-color: #73c0de;
		border: none;
	}

	.changeSquareTrue4 {
		width: 100%;
		height: 400px;
		background-color: white;
		transition-duration: 1s;
		transition-property: all;
		border: none;
	}

	.changeSquareTrue6 {
		width: 100%;
		height: 100%;
		background-color: white;
		transition-duration: 1s;
		transition-property: all;
		border: none;
	}

	.changeSquareTrue {
		width: 100%;
		height: 500px;
		background-color: white;
		transition-duration: 1s;
		transition-property: all;
		border: none;
	}

	.changeSquareBox {
		width: 48%;
		height: 500px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.changeSquareBox4 {
		width: 100%;
		height: 500px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.changeSquareBox6 {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.logWord {
		width: 100%;
		height: 50%;
		border: solid 1px black;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 5px;
	}

	.portInfoMes {
		width: 50%;
		height: 100%;
		background-color: white;
		overflow: scroll;
	}

	.portInfoMesDiv {
		width: 100%;

	}

	.portInfoBox {
		width: 98%;
		height: calc(100% - 100px);
		margin: 10px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		// background-color: white;
	}

	.tableBorder {
		min-width: 100px;
		display: flex;
		justify-content: center;
		flex-direction: row;
		border: solid 1px black;
	}

	.logContect {
		width: 100%;
		overflow-y: scroll;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		font-size: 20px;
	}

	.logContect1 {
		width: 100%;
		overflow: auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
	}

	.logTitle {
		width: 95%;
		margin: 0 auto;
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.portConBox {
		background-color: white;
		height: 425px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
	}

	.logTitle1 {
		width: 98%;
		margin: 0 auto;
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.mainPage {
		background: #ededed;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		position: fixed;
		top: 0;

		.echartsBox {
			width: 100%;
			height: 50%;
		}

		.hardwareTitle {
			width: 100%;
			height: 50px;
			background-color: #ee6666;
			color: white;
			font-size: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.equipmentTitle {
			width: 100%;
			height: 50px;
			background-color: #91cc75;
			color: white;
			font-size: 20px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}

		.hardwareBox {
			width: 48%;
			height: 500px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			display: flex;
			flex-direction: column;

		}

		.equipmentBox {
			width: 48%;
			height: 500px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		}

		.portInfoLeft {
			width: 100%;
			min-height: 400px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		}

		.topBox {
			width: 100%;
			height: 500px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

		}

		.hardwareInfoBox {
			width: 100%;
			height: 440px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}

		.leftTopBox {
			width: 100%;
			height: 725px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}



		.VLANBox {
			background-color: white;
			height: 425px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			border-radius: 5px;
		}

		::-webkit-scrollbar {
			width: 4px;
			/*高宽分别对应横竖滚动条的尺寸*/
			height: 0px;
		}

		::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background: rgba(0, 0, 0, 0.2);
		}

		::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 0;
			background: rgba(0, 0, 0, 0.1);
		}

		.peizhiTable {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			overflow-y: auto;
		}

		.hardwareTable {
			margin-top: 20px;
			height: 220px;
			text-align: center;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			overflow-y: auto;
		}

		.levelBox {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 18px;
		}

		.peizhiTitle {
			width: 50px;
			height: 100%;
			color: white;
			font-size: 20px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		.peizhiBox1 {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.peizhiBox {
			width: 96%;
			height: 48%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.beizhiInfo {
			width: 38%;
			height: 100%;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.beizhiInfo1 {
			width: 60%;
			height: 100%;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.hardware {
			width: 24%;
			height: 100%;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			display: flex;
			flex-direction: column;

		}

		.content-header {
			padding: 15px;
			font-size: 1.25rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.content-main {
			padding: 15px;

			.container-fluid {
				width: 100%;

				/deep/ .el-card__body {
					padding: 0 0 0 0;
				}

				.callout-info {
					border-left-color: #117a8b;

					.head {
						font-size: 1rem;

						i {
							font-style: normal;
						}
					}

					.main {
						font-size: 0.9rem;
					}
				}

				// .mainPage-info-box {
				// 	padding: 5px;

				// 	.left {
				// 		border-radius: 0.25rem;
				// 		-ms-flex-align: center;
				// 		align-items: center;
				// 		display: -ms-flexbox;
				// 		display: flex;
				// 		font-size: 1.875rem;
				// 		-ms-flex-pack: center;
				// 		justify-content: center;
				// 		text-align: center;
				// 		width: 70px;
				// 		min-height: 70px;
				// 	}
				// }
			}
		}
	}

	.containBox {
		width: 98%;
		height: calc(100% - 100px);
		background-color: white;
		margin: 10px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;

	}

	.containBox4 {
		width: 98%;
		// height: calc(100% - 100px);
		background-color: white;
		margin: 10px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;

	}

	.containBox3 {
		width: 98%;
		height: calc(100% - 100px);
		margin: 10px auto;
		display: flex;
		flex-direction: column;


	}

	.portRightBox {
		width: 70%;
		// height: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		overflow-y: scroll;
		align-items: flex-start;

	}

	// ::-webkit-scrollbar {
	// 	display: none;
	// }

	.notPortRightBox {
		width: 70%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		overflow-y: scroll;
		align-items: flex-start;

	}

	.portLeftBox {
		width: 468px;
		height: 100%;
		border-right: solid 1px gainsboro;
	}

	.portName {
		width: 100%;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	.portBox {
		width: 120px;
		height: 120px;
		border-radius: 10px;
		border: solid 1px #c283d5;
		margin: 10px 18px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.mainPage::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}



	.mainPage::-webkit-scrollbar-thumb {
		background-color: rgba(4, 44, 119, 0.7);
		border-radius: 3px;
	}

	.box-card {
		max-height: 360px;
	}

	/deep/ .el-card.is-always-shadow {
		box-shadow: 0 0 1px #00000021, 0 1px 3px #0003;
	}

	.el-menu-item.is-active {
		background-color: white !important;
	}

	.el-submenu__title {
		pointer-events: none !important;
	}

	.el-menu-item:hover {
		background-color: white !important;
	}
</style>
